<template>
    <div class="pl_container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="text-center mb-6">
        <h1 class="text-2xl font-bold mb-2">盈亏计算工具</h1>
        <p class="text-gray-600 text-sm">输入您的投资金额和盈亏情况，计算需要上涨多少金额和百分比才能回本</p>
      </div>
      
      <!-- 主要内容卡片 -->
      <el-card class="mb-6">
        <template #header>
          <div class="clearfix">
            <span>投资信息</span>
          </div>
        </template>
        
        <el-form ref="form" :model="form" label-width="120px" class="space-y-4">
          <!-- 金额输入 -->
          <el-form-item label="投资金额" prop="amount">
            <el-input v-model.number="form.amount" prefix-icon="el-icon-money" placeholder="请输入投资金额" clearable>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          
          <!-- 盈亏输入区域 -->
          <el-form-item label="盈亏情况">
            <el-tabs v-model="profitLossType" @tab-click="handleTabClick">
              <el-tab-pane label="金额" name="amount"></el-tab-pane>
              <el-tab-pane label="百分比" name="percent"></el-tab-pane>
            </el-tabs>
          </el-form-item>
          
          <!-- 盈亏金额输入 -->
          <el-form-item v-show="profitLossType === 'amount'" prop="profitLossAmount">
            <el-input v-model.number="form.profitLossAmount" prefix-icon="el-icon-cny" placeholder="请输入盈亏金额" clearable>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          
          <!-- 盈亏百分比输入 -->
          <el-form-item v-show="profitLossType === 'percent'" prop="profitLossPercent">
            <el-input v-model.number="form.profitLossPercent" prefix-icon="el-icon-percentage" placeholder="请输入盈亏百分比" clearable>
              <template #append>%</template>
            </el-input>
          </el-form-item>
          
          <!-- 计算按钮 -->
          <el-form-item>
            <el-button 
              type="primary" 
              icon="el-icon-calculator" 
              @click="calculate"
              :loading="loading"
              :disabled="!form.amount || (profitLossType === 'amount' && form.profitLossAmount === null) || (profitLossType === 'percent' && form.profitLossPercent === null)">
              计算
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 计算结果 -->
      <div v-if="showResults" class="space-y-6">
        <!-- 盈亏概览卡片 -->
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>盈亏概览</span>
            </div>
          </template>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
            <!-- 当前市值 -->
            <el-card shadow="hover" class="p-3">
              <div class="text-sm text-gray-500 mb-1">当前市值</div>
              <p class="text-xl font-bold" :class="currentValue >= form.amount ? 'text-success' : 'text-danger'">
                {{ currentValue.toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
              </p>
            </el-card>
            
            <!-- 盈亏金额 -->
            <el-card shadow="hover" class="p-3">
              <div class="text-sm text-gray-500 mb-1">盈亏金额</div>
              <p class="text-xl font-bold" :class="profitValue >= 0 ? 'text-success' : 'text-danger'">
                {{ profitValue >= 0 ? '+' : '' }}{{ profitValue.toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
              </p>
            </el-card>
            
            <!-- 盈亏百分比 -->
            <el-card shadow="hover" class="p-3">
              <div class="text-sm text-gray-500 mb-1">盈亏百分比</div>
              <p class="text-xl font-bold" :class="profitPercent >= 0 ? 'text-success' : 'text-danger'">
                {{ profitPercent >= 0 ? '+' : '' }}{{ profitPercent.toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }}
              </p>
            </el-card>
          </div>
        </el-card>
        
        <!-- 需要上涨的金额和百分比 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- 需要上涨的金额 -->
          <el-card shadow="hover">
            <div class="flex items-center p-4">
              <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                <i class="el-icon-arrow-up text-primary text-xl"></i>
              </div>
              <div>
                <h3 class="text-gray-500 font-medium mb-1">需要上涨金额</h3>
                <p class="text-2xl font-bold text-primary">
                  {{ Math.abs(needIncreaseAmount).toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
                </p>
              </div>
            </div>
          </el-card>
          
          <!-- 需要上涨的百分比 -->
          <el-card shadow="hover">
            <div class="flex items-center p-4">
              <div class="w-12 h-12 rounded-full bg-success5 flex items-center justify-center mr-4">
                <i class="el-icon-line-chart text-success text-xl"></i>
              </div>
              <div>
                <h3 class="text-gray-500 font-medium mb-1">需要上涨百分比</h3>
                <p class="text-2xl font-bold text-success">
                  {{ needIncreasePercent.toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }}
                </p>
              </div>
            </div>
          </el-card>
        </div>
        
        <!-- 市值变化模拟 -->
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>市值变化模拟</span>
            </div>
          </template>
          
          <!-- 如果当前亏损，显示上涨相同百分比后的市值 -->
          <div v-if="profitPercent < 0" class="p-4 bg-success5 border-l-4 border-success rounded">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-sm text-gray-600 mb-1">如果上涨相同百分比 ({{ Math.abs(profitPercent).toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }})</div>
                <p class="text-xl font-bold text-success">
                  {{ upSamePercentValue.toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
                </p>
              </div>
              <div class="text-right">
                <div class="text-sm text-gray-600 mb-1">相比初始投资</div>
                <p class="font-bold" :class="upSamePercentValue >= form.amount ? 'text-success' : 'text-danger'">
                  {{ upSamePercentValue >= form.amount ? '+' : '' }}{{ (upSamePercentValue - form.amount).toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
                  ({{ ((upSamePercentValue - form.amount) / form.amount).toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }})
                </p>
              </div>
            </div>
          </div>
          
          <!-- 如果当前盈利，显示下跌相同百分比后的市值 -->
          <div v-if="profitPercent > 0" class="p-4 bg-danger5 border-l-4 border-danger rounded">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-sm text-gray-600 mb-1">如果下跌相同百分比 ({{ profitPercent.toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }})</div>
                <p class="text-xl font-bold text-danger">
                  {{ downSamePercentValue.toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
                </p>
              </div>
              <div class="text-right">
                <div class="text-sm text-gray-600 mb-1">相比初始投资</div>
                <p class="font-bold" :class="downSamePercentValue >= form.amount ? 'text-success' : 'text-danger'">
                  {{ downSamePercentValue >= form.amount ? '+' : '' }}{{ (downSamePercentValue - form.amount).toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) }} 元
                  ({{ ((downSamePercentValue - form.amount) / form.amount).toLocaleString('zh-CN', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2}) }})
                </p>
              </div>
            </div>
          </div>
          
          <!-- 示例说明 -->
          <div v-if="profitPercent !== 0" class="mt-4 p-3 bg-gray-50 rounded">
            <p class="text-sm" v-if="profitPercent < 0">
              <i class="el-icon-info text-primary mr-1"></i>
              <span class="font-medium">示例:</span> 如果您当前亏损20%，剩余市值为80元，此时上涨20%后市值为96元，仍低于初始投资100元。
            </p>
            <p class="text-sm" v-if="profitPercent > 0">
              <i class="el-icon-info text-primary mr-1"></i>
              <span class="font-medium">示例:</span> 如果您当前盈利20%，市值为120元，此时下跌20%后市值为96元，低于初始投资100元。
            </p>
          </div>
        </el-card>
      </div>
      
      <!-- 说明卡片 -->
      <el-card class="mt-6">
        <template #header>
          <div class="clearfix">
            <span>计算说明</span>
          </div>
        </template>
        
        <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
          <li>可以通过金额或百分比两种方式输入盈亏情况</li>
          <li>当盈亏为负数时，表示当前处于亏损状态</li>
          <li>系统会计算需要上涨多少金额和百分比才能回本</li>
          <li>市值变化模拟显示：如果当前亏损，上涨相同百分比后的市值；如果当前盈利，下跌相同百分比后的市值</li>
        </ul>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ProfitLossCalculator',
    data() {
      return {
        form: {
          amount: null,
          profitLossAmount: null,
          profitLossPercent: null
        },
        profitLossType: 'amount', // 默认使用金额方式
        showResults: false,
        needIncreaseAmount: 0,
        needIncreasePercent: 0,
        currentValue: 0,
        profitValue: 0,
        profitPercent: 0,
        upSamePercentValue: 0,  // 上涨相同百分比后的市值
        downSamePercentValue: 0, // 下跌相同百分比后的市值
        loading: false
      }
    },
    methods: {
      handleTabClick(tab) {
        // 切换盈亏输入类型时，清空另一种类型的值
        if (tab.name === 'amount') {
          this.form.profitLossPercent = null;
        } else {
          this.form.profitLossAmount = null;
        }
      },
      calculate() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true;
            
            // 模拟计算延迟，增强用户体验
            setTimeout(() => {
              let profitLossValue = 0;
              
              // 根据选择的盈亏类型获取盈亏值
              if (this.profitLossType === 'amount') {
                profitLossValue = this.form.profitLossAmount;
              } else {
                // 将百分比转换为实际金额
                profitLossValue = this.form.amount * (this.form.profitLossPercent / 100);
              }
              
              // 计算当前市值
              this.currentValue = this.form.amount + profitLossValue;
              this.profitValue = profitLossValue;
              this.profitPercent = profitLossValue / this.form.amount;
              
              // 计算需要上涨的金额和百分比
              if (profitLossValue < 0) {
                this.needIncreaseAmount = Math.abs(profitLossValue);
                this.needIncreasePercent = this.needIncreaseAmount / this.currentValue;
              } else {
                this.needIncreaseAmount = 0;
                this.needIncreasePercent = 0;
              }
              
              // 计算市值变化模拟
              if (this.profitPercent < 0) {
                // 如果当前亏损，计算上涨相同百分比后的市值
                this.upSamePercentValue = this.currentValue * (1 + Math.abs(this.profitPercent));
              } else if (this.profitPercent > 0) {
                // 如果当前盈利，计算下跌相同百分比后的市值
                this.downSamePercentValue = this.currentValue * (1 - this.profitPercent);
              }
              
              this.showResults = true;
              this.loading = false;
              
              // 显示成功提示
              this.$message({
                message: '计算成功',
                type: 'success',
                duration: 2000
              });
            }, 500);
          } else {
            // 显示错误提示
            this.$message({
              message: '请输入有效的投资金额和盈亏情况',
              type: 'error',
              duration: 2000
            });
            return false;
          }
        });
      }
    }
  }
  </script>
  
  <style scoped  lang="scss">
  .pl_container {
    max-width: 1200px;
    margin: 0 auto;

  .text-success {
    color: #67C23A;
  }
  
  .text-danger {
    color: #F56C6C;
  }
  
  .text-primary {
    color: #409EFF;
  }
  
  .text-gray-500 {
    color: #909399;
  }
  
  .text-gray-600 {
    color: #606266;
  }
  
  .text-gray-700 {
    color: #303133;
  }
  
  .font-bold {
    font-weight: bold;
  }
  
  .font-medium {
    font-weight: 500;
  }
  
  .text-xl {
    font-size: 1.25rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
  }
  
  .text-sm {
    font-size: 0.875rem;
  }
  
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  
  .mb-3 {
    margin-bottom: 0.75rem;
  }
  
  .mb-4 {
    margin-bottom: 1rem;
  }
  
  .mb-6 {
    margin-bottom: 1.5rem;
  }
  
  .mr-1 {
    margin-right: 0.25rem;
  }
  
  .mr-2 {
    margin-right: 0.5rem;
  }
  
  .mr-4 {
    margin-right: 1rem;
  }
  
  .p-3 {
    padding: 0.75rem;
  }
  
  .p-4 {
    padding: 1rem;
  }
  
  .rounded {
    border-radius: 4px;
  }
  
  .flex {
    display: flex;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .items-center {
    align-items: center;
  }
  
  .text-center {
    text-align: center;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .grid {
    display: grid;
  }
  
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .gap-4 {
    gap: 1rem;
    display: flex;
  }
  
  .bg-success5 {
    background-color: rgba(103, 194, 58, 0.05);
  }
  
  .bg-danger5 {
    background-color: rgba(245, 108, 108, 0.05);
  }
  
  .bg-gray-50 {
    background-color: #f5f7fa;
  }
  
  .border-l-4 {
    border-left-width: 4px;
  }
  
  .border-success {
    border-color: #67C23A;
  }
  
  .border-danger {
    border-color: #F56C6C;
  }
  
  @media (max-width: 768px) {
    .md:grid-cols-2 {
      grid-template-columns: 1fr;
    }
    
    .md:grid-cols-3 {
      grid-template-columns: 1fr;
    }
  }
}
  
  </style>
      